<template>
	<view class="content padding">
		<view class="padding ffffff border_2 margin_bottom3" v-for="item in invitationCommList.data" :key="item.id">
			<view class="flexbetween">
				<view class="flexleft">
					<view class="image_ya margin_right2">
						<image :src="item.user.avatar" mode="widthFix"></image>
					</view>
					<view class="text_g color_ling">{{item.user.nickname}}</view>
				</view>
				<view>
					<view class="year text_a  color_jiu">{{item.createtime_text}}</view>
				</view>
			</view>
			<view class="margin_top text_a color_six">
				{{item.content}}
			</view>
			<view class="margin_top padding_top flexright border_bottom_solid">
				<view class="flexleft" v-if="item.state==1">
					<view class="disagree margin_right3" @click="disagree(item.id)">
						不同意
					</view>
					<view class="agree" @click="agree(item)">
						同意
					</view>
				</view>
				<view class="text_five" style="color: #00AB20;" v-if="item.state==2">
					同意此观点！打赏：{{item.give_money}}元
				</view>
				<view class="text_five" style="color: #F3271C;" v-if="item.state==3">
					不同意此观点！
				</view>
			</view>
		</view>
		<view class="flexcenter placeholderBoxTop" v-if="!invitationCommList.data.length">
			<image class="placeholderBox" src="/static/placeholderimg.png" mode="widthFix"></image>
		</view>
		<!-- 二次确认修改信息 -->
		<u-modal :show="show" :showConfirmButton="false" closeOnClickOverlay @close="show=false">
			<view class="slot-content">
				<view class="title">
					打赏
				</view>
				<input class="input" type="text" placeholder="请输入打赏金额"
					placeholder-style="font-size: 32rpx;font-weight: 500;color: #000000;" v-model="pay_price">
				<view class="margin_top5 text_g text" style="color: #F3271C;">
					<text>（您还可打赏</text>{{remain_money}}<text>元）</text>
				</view>
				<view class="button" @click="confirmAgree">
					确认打赏
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				show: false,
				page: 1,
				id: "",
				invitationCommList: { //评论列表
					data: []
				},
				remain_money: 0, //可打赏价格
				community_reply_id: "", //打赏抢答的回复ID
				pay_price: "", //打赏价格
				isOnShow: false
			}
		},
		onLoad(options) {
			let data = JSON.parse(decodeURIComponent(options.msg))
			this.id = data.id
			this.remain_money = data.remain_money
			this.getInvitationCommList()
		},
		onShow() {
			if (this.isOnShow) {
				this.getInvitationCommList()
			}
		},
		methods: {
			getInvitationCommList(isPage, page) { //评论列表
				let _this = this
				httpRequest.request('/api/community/getcommentlist', 'GET', {
					page: page || 1,
					// limit: _this.limit,
					community_id: _this.id,
				}).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.invitationCommList;
						if (isPage == true) {
							_this.invitationCommList.data = dataList.data.concat(resList.data);
						} else {
							this.invitationCommList = res.data
							_this.invitationCommList.data = resList.data;
						}
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
					_this.isOnShow = true
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.invitationCommList;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.getInvitationCommList(true, page);
			},
			disagree(id) { //不同意
				let _this = this
				httpRequest.request('/api/community/disagree', 'POST', {
					community_id: _this.id,
					community_reply_id: id,
				}).then(res => {
					if (res.code == 1) {
						httpRequest.toast(res.msg);
						_this.getInvitationCommList()
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			agree(item) { //同意
				this.community_reply_id = item.id
				this.show = true
			},
			confirmAgree() {
				let msg6 = {
					community_id: this.id,
					community_reply_id: this.community_reply_id,
					pay_price: this.pay_price
				}
				if (!this.pay_price || this.pay_price == 0) {
					httpRequest.toast("打赏金额有误！");
					return false
				}
				if (this.pay_price > this.remain_money) {
					httpRequest.toast(`最多可打赏${this.remain_money}元!`);
					return false
				}
				uni.navigateTo({
					url: "/pages_index/payment?msg6=" + encodeURIComponent(JSON.stringify(msg6))
				})
				this.show = false

				// let _this = this
				// httpRequest.request('/api/community/create_reward_order', 'POST', {
				// 	community_id:_this.id,
				// 	community_reply_id: _this.community_reply_id,
				// }).then(res => {
				// 	if (res.code == 1) {

				// 	} else if (res.code == 0) {
				// 		httpRequest.toast(res.msg);
				// 	} else {
				// 		httpRequest.toast('网络开小差啦');
				// 	}
				// }).catch(err => {
				// 	httpRequest.toast(err.msg);
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.image_ya {
		width: 77rpx;
		height: 77rpx;
		border-radius: 50%;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.border_bottom_solid {
		border-top: 2rpx solid rgba(0, 0, 0, 0.03);
	}

	.disagree {
		width: 170rpx;
		height: 67rpx;
		line-height: 67rpx;
		text-align: center;
		border: 2rpx solid rgba(102, 102, 102, 1);
		border-radius: 120rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.agree {
		width: 170rpx;
		height: 67rpx;
		line-height: 67rpx;
		text-align: center;
		border: 2rpx solid rgba(243, 39, 28, 1);
		border-radius: 120rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #F3271C;
	}

	.slot-content {
		width: 100%;

		.title {
			font-size: 40rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #000000;
			text-align: center;
		}

		.input {
			width: 100%;
			height: 100rpx;
			margin-top: 50rpx;
			text-align: center;
			// padding: 20rpx 0;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			border: 1rpx solid #DFDFDF;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
		}

		.button {
			width: 420rpx;
			height: 81rpx;
			line-height: 81rpx;
			text-align: center;
			border-radius: 51rpx;
			background-color: rgba(243, 39, 28, 1);
			margin: 60rpx auto 0;
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
</style>